<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue';
import { RouteQueryParameter } from '../../services/client';
import { QueryParameterMatchModes } from '../../constants/RouteConfigConstants'
import NtmMultipleValuesEditor from './NtmMultipleValuesEditor.vue';

const model = defineModel<RouteQueryParameter[]>();
const deleteRow = (index: number) => {
    model.value?.splice(index, 1);
}
const appendRow = () => {
    const rowValue = new RouteQueryParameter();
    rowValue.values = [];
    if (!model.value) {
        model.value = [];
    }
    model.value.push(rowValue);
}
</script> 


<template>
    <ElTable :data="model">
        <ElTableColumn label="Name" width="200">
            <template #default="scope: { row: RouteQueryParameter }">
                <ElInput v-model="scope.row.name"></ElInput>
            </template>
        </ElTableColumn>
        <ElTableColumn label="Mode" width="160">
            <template #default="scope: { row: RouteQueryParameter }">
                <ElSelect v-model="scope.row.mode">
                    <ElOption v-for="(mode, index) in QueryParameterMatchModes" :key="index" :label="mode"
                        :value="mode">
                        {{ mode }}
                    </ElOption>
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="Values">
            <template #default="scope: { row: RouteQueryParameter }">
                <NtmMultipleValuesEditor v-model="scope.row.values"></NtmMultipleValuesEditor>
            </template>
        </ElTableColumn>
        <ElTableColumn label="Is Case Sensitive" width="160">
            <template #default="scope: { row: RouteQueryParameter }">
                <ElSwitch v-model="scope.row.isCaseSensitive"></ElSwitch>
            </template>
        </ElTableColumn>
        <ElTableColumn label="Operations" width="120">
            <template #default="scope: { $index: number }">
                <ElButton type="danger" :icon="Delete" @click="deleteRow(scope.$index)"></ElButton>
            </template>
        </ElTableColumn>
        <template #append>
            <ElButton style="width: 100%" size="small" :icon="Plus" @click="appendRow">增加</ElButton>
        </template>
    </ElTable>
</template>